<template>
  <div class="app-container">
    <!-- <div class="header"> -->
    <el-form
      label-width="100px"
      :inline="true"
      style="background-color: #fff;padding-top: 25px;
      padding-left: 30px;
      padding-bottom: 20px;
      "
    >
      <el-form-item label="订单编号：" prop="id">
        <el-input v-model="arr.id" placeholder="请输入订单编号" style="width: 130%;padding-right: 100px;" />
      </el-form-item>
      <el-form-item label="订单状态：" prop="status">
        <el-select v-model="arr.status" placeholder="请选择" style="width: 130%;padding-right: 100px;">
          <el-option label="待取件" :value="23000" />
          <el-option label="已取件" :value="23001" />
          <el-option label="运输中" :value="23005" />
          <el-option label="派送中" :value="23008" />
          <el-option label="已签收" :value="23009" />
          <el-option label="拒收" :value="23010" />
          <el-option label="已取消" :value="23011" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-form-item label="付费状态：" prop="paymentStatus">
          <el-select v-model="arr.paymentStatus" placeholder="请选择" style="width: 130%;padding-right: 100px;">
            <el-option label="已付" :value="2" />
            <el-option label="未付" :value="1" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="发件人姓名：" prop="senderName">
        <el-input v-model="arr.senderName" placeholder="请输入发件人姓名" style="width: 130%;padding-right: 110px;" />
      </el-form-item>
      <el-form-item label="发件人电话：" prop="senderPhone">
        <el-input v-model="arr.senderPhone" placeholder="请输入发件人电话" style="width: 130%;padding-right: 100px;" />
      </el-form-item>
      <el-form-item>
        <el-form-item label="发件人地址：">
          <el-select v-model="treeData.name" placeholder="请选择" style="width: 90px" @change="getCity">
            <el-option
              v-for="option in treeData"
              :key="option.id"
              :label="option.name"
              :value="option.id"
            />
          </el-select>
          <el-select v-model="arr.senderCityId" placeholder="请选择" style="width: 100px;padding-left: 10px;">
            <el-option label="" value="" />
          </el-select>
          <el-select v-model="arr.senderCountyId" placeholder="请选择" style="width: 100px;padding-left: 10px;">
            <el-option label="" value="" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="收件人姓名：" prop="receiverName">
        <el-input v-model="arr.receiverName" placeholder="请输入收件人姓名" style="width: 130%;padding-right: 110px;" />
      </el-form-item>
      <el-form-item label="收件人电话：" prop="receiverPhone">
        <el-input v-model="arr.receiverPhone" placeholder="请输入收件人电话" style="width: 130%;padding-right: 100px;" />
      </el-form-item>
      <el-form-item>
        <el-form-item label="收件人地址：">
          <el-select v-model="treeData.name" placeholder="请选择" style="width: 90px" @change="getCity">
            <el-option
              v-for="option in treeData"
              :key="option.id"
              :label="option.name"
              :value="option.id"
            />
          </el-select>
          <el-select v-model="arr.receiverPhone" placeholder="请选择" style="width: 100px;padding-left: 10px;">
            <el-option label="" value="" />
          </el-select>
          <el-select v-model="arr.receiverAddress" placeholder="请选择" style="width: 100px;padding-left: 10px;">
            <el-option label="" value="" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-row>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="edit">重置</el-button>
      </el-row>
    </el-form>
    <!-- 表单 -->
    <!-- :index="indexMethod" -->
    <template>
      <div
        element-loading-text="加载中"
        style="margin-top: 20px"
      >
        <el-card
          shadow="never"
          class="table-card-box"
        >
          <el-table
            :data="list"
            style="width: 100%;"
            height="630"
          >
            <el-table-column
              type="index"
              label="序号"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.$index +
                    (arr.page - 1) *
                    arr.pageSize +
                    1
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="订单编号"
              width="250"
            />
            <el-table-column
              prop="memberId"
              label="运行编号"
              width="300"
            />
            <el-table-column
              prop="createTime"
              label="下单时间"
              width="250"
            />
            <el-table-column
              prop="status"
              label="订单状态"
            >
              <template v-slot="{row}">
                <span v-if="row.status === 23000">{{ 待取件 }}</span>
                <span v-else-if="row.status === 23001">{{ 已取件 }}</span>
                <span v-else-if="row.status === 23002">网点自寄</span>
                <span v-else-if="row.status === 23003">网点入库</span>
                <span v-else-if="row.status === 23004">待装车</span>
                <span v-else-if="row.status === 23005">运输中</span>
                <span v-else-if="row.status === 23006">网点出库</span>
                <span v-else-if="row.status === 23007">待派送</span>
                <span v-else-if="row.status === 23008">派送中</span>
                <span v-else-if="row.status === 23009">已签收</span>
                <span v-else-if="row.status === 23010">拒收</span>
                <span v-else-if="row.status === 23011">已取消</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="senderName"
              label="发送人姓名"
              width="100"
            />
            <el-table-column
              prop="senderPhone"
              label="发送人电话"
              width="150"
            />
            <el-table-column
              prop="senderAddress"
              label="发送人地址"
              width="150"
            />
            <el-table-column
              prop="receiverName"
              label="收件人姓名"
              width="150"
            />
            <el-table-column
              prop="receiverPhone"
              label="收件人电话"
              width="150"
            />
            <el-table-column
              prop="receiverAddress"
              label="收件人地址"
              width="150"
            />
            <el-table-column
              prop="pickupType"
              label="取件类型"
              width="150"
            >
              <template v-slot="{row}">
                {{ row. pickupType ===1? '网点自寄' : '上门取件' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentMethod"
              label="付费类型"
              width="150"
            >
              <template v-slot="{row}">
                <span>{{ row. paymentMethod ===1? '预结' : '到付' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="paymentStatus"
              label="付费状态"
              width="150"
            >
              <template v-slot="{row}">
                <span>{{ row. paymentStatus ===1? '未付' : '已付' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100"
            >
              <template v-slot="{row}">
                <el-button type="text" size="small" style="color: #419eff;" @click="$router.push({path:'/business/particulars',query: {id:row.id}})">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </template>
    <!-- 分页 -->
    <div class="block" style="background-color: #fff;padding-bottom: 20px;padding-top: 10px;display: flex; justify-content: center;">
      <el-pagination
        :current-page="arr.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="arr.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div></template>

<script>
import { orderPaging } from '@/api/application'
import { getCity } from '@/api/city'
export default {
  data() {
    return {
      arr: {
        id: '',
        page: 1,
        pageSize: 10,
        sizes: [],
        keyword: '',
        status: '',
        paymentStatus: '',
        senderName: '',
        senderPhone: '',
        receiverName: '',
        receiverPhone: ''
      },
      form: {
        senderProvinceId: ''
      },
      paymentStatusOptions: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      list: [],
      total: 0,
      treeData: [],
      timer: null
    }
  },
  created() {
    this.orderPaging()
    this.getCity()
  },
  methods: {
    // 搜索
    search() {
      this.list.page = 1
      this.orderPaging(this.arr)
    },
    // 城市信息
    async getCity(list) {
      const msg = await getCity(list)
      this.treeData = msg
      // console.log(this.treeData)
    },
    // 重置按钮
    edit() {
      this.arr.page = 1
      this.orderPaging()
    },
    // 分页
    handleCurrentChange(num) {
      this.arr.page = num
      this.orderPaging(this.list)
    },
    // 主页
    async orderPaging() {
      const msg = await orderPaging(this.arr)
      this.list = msg.items
      this.total = Number(msg.counts)
      this.status = msg.items.status
      // this.$nextTick(() => {
      //   this.indexMethod()
      // })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
